<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">

	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

	<link rel="stylesheet" type="text/css" href="../plugins/bootstrap-fileinput/css/fileinput.min.css" />
	<script type="text/javascript" src="../plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="../plugins/bootstrap-fileinput/js/locales/zh.js"></script>

	<link rel="stylesheet" href="../plugins/select2/select2.css" />
	<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
	<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
    
    
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->

						<form id="goodForm">
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select id="s1" name="category1Id" class="form-control" >
														<option value="">-请选择-</option>
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select id="s2" name="category2Id" class="form-control select-sm" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select id="s3" name="category3Id" class="form-control select-sm" ></select>
		                              			</td>
		                              			<td id="typeTemplateId">
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input name="goodsName" type="text" class="form-control"    placeholder="商品名称" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select name="brandId" id="brand" class="form-control" >
										  <option value="">-请选择分类-</option>
									  </select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input name="caption" type="text" class="form-control"   placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input name="price" type="text" class="form-control"  placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea name="introduction" id="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea name="packageList" rows="4"  class="form-control"   placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea name="saleService" rows="4"  class="form-control"    placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="pictureAndColor">

					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div id="attributeContent" class="row data-type">
	                                <div>
		                                <div class="col-md-2 title">扩展属性</div>
				                        <div class="col-md-10 data">
				                              <input class="form-control" placeholder="请选择分类">
				                        </div>
	                                </div>
                                </div>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
                            	
	                                <div class="row data-type" id="spec1">
		                                                                                  
	                                </div>
	
	                                
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>
												    <th class="sorting">网络</th>
													<th class="sorting">机身内存</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody>
						                      <tr>					                           
										            <td>
										            	移动3G
										            </td>
													<td>
										            	16G
										            </td>
										            <td>
										           		<input name="price2" class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input name="number" class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
										            <td>
														移动3G
										            </td>
													<td>
										            	32G
										            </td>
										            <td>
										           		<input name="price2" class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input name="number" class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
													<td>
														移动4G
										            </td>
													<td>
										            	16G
										            </td>
										            <td>
										           		<input name="price2" class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input name="number" class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
													<td>
														移动4G
										            </td>
													<td>
										            	32G
										            </td>
										            <td>
										           		<input name="price2" class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input name="number" class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  
						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>
                            
                        </div><div id="value">

						</div>

						</form>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button onclick="add()" class="btn btn-primary" ><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td>
						<input id="color"  class="form-control" placeholder="颜色" >
					</td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<input type="file" id="myFile" name="myFile" />
									<input type="hidden" class="form-control" name="backPic" >
					            </td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button onclick="addPictures()" class="btn btn-success"  data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[id="content"]', {
			allowFileManager : true,
			afterBlur: function(){this.sync();}
		});

	});


	$(function (){
		getItemList1(0)

		$("#myFile").fileinput({
			language : "zh",
			uploadUrl: "/file/uploadFile2",
			browserClass : "btn btn-primary",
			allowedFileExtensions: ['jpg', 'png', 'gif'],
			maxFileSize: 2048,
			maxFileCount: 1,
			enctype : "multipart/form-data"
		})

		$("#myFile").on("fileuploaded", function (event, data, previewId, index){
			if(data.response != null){
				$("[name=backPic]").val(data.response.Url);
			}
		})

	})

	function add(){

		var titile2 = ''

		//获取扩展属性字符串
		var inputList = $("#attributeContent").find("input")
		var attributeList = []
		for (var i = 0; i < inputList.length; i++){
			var div = document.getElementById("-" + i).innerHTML
			var attribute = {text:div,value:$(inputList[i]).val()}
			attributeList.push(attribute)

			titile2 += $(inputList[i]).val()
		}
		var attributeListStr = JSON.stringify(attributeList)
		$("#value").html('<input name="customAttributeItems" type="hidden" value=' + attributeListStr + '>')

		//获取图片,颜色字符串
		var trs = $("#pictureAndColor").find("tr")
		var pictureList = []
		for (var i = 0; i < trs.length; i++){
			var inputs = $(trs[i]).find("input")
			var picture = {color:$(inputs[0]).val(), url:$(inputs[1]).val()}
			pictureList.push(picture)
		}
		var pictureListStr = JSON.stringify(pictureList)
		$("#value").append('<input name="itemImages" type="hidden" value=' + pictureListStr + '>')

		//获取规格
		var selectArr = $("#spec1").find("select")
		var itemResultJSON = []
		for (var i = 0; i < selectArr.length; i++){
			var itemStr = []

			var id = $(selectArr[i]).attr("id")
			var itemJSON = $("#" + id).select2("data")
			for (var j = 0; j < itemJSON.length; j++){
				itemStr.push(itemJSON[j].text)
			}
			var attribute = document.getElementById(id + id).innerHTML
			var itemJson = {"attributeName":attribute, "attributeValue":itemStr}
			itemResultJSON.push(itemJson)
		}
		var itemListStr = JSON.stringify(itemResultJSON)
		$("#value").append('<input name="specificationItems" type="hidden" value=' + itemListStr + '>')
		$("#value").append('<input name="title2" type="hidden" value=' + titile2 + '>')

		$.ajax({
			url:"/goodController/addGood",
			data:$("#goodForm").serialize(),
			dataType:"json",
			type:"post",
			async:false,
			success:function (result){
				var msg = result.message
				alert(msg)
			},
			error:function (){
				alert("系统错误")
			}
		})
	}

	function addPictures(){
		var color = $("#color").val()
		var picture = $("[name=backPic]").val()

		dd = '<tr>' +
				'<td>' +
				'<input name="color" class="form-control"  value="' + color + '">' +
				'</td>' +
				'<td>' +
				'<img alt="" src="' + picture + '" width="100px" height="100px">' +
				'<input type="text" class="form-control" name="picture" value="' + picture + '" >' +
				'</td>' +
				'<td> <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>' +
				'</tr>'

		$("#pictureAndColor").append(dd)
	}

	function getItemList1(id){
		$.ajax({
			url:"/goodController/getItemList",
			data:{"id":id},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result){
				var list = result.result.rows;
				var dd = ''
				for(i in list){
					dd += '<option value="' + list[i].id + '">' + list[i].name + '</option>'
				}
				$("#s1").append(dd)
				$("#s1").change(function (){
					$("#s2").html("");
					$("#s3").html("");
					getItemList2($(this).val())
				})
			},
			error:function (){
				alert("系统错误")
			}
		})
	}

	function getItemList2(id){
		$.ajax({
			url:"/goodController/getItemList",
			data:{"id":id},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result){
				var list = result.result.rows;
				var dd = ''
				for(i in list){
					dd += '<option value="' + list[i].id + '">' + list[i].name + '</option>'
				}
				$("#s2").html("<option value=''>-请选择-</option>")
				$("#s2").append(dd)
				$("#s2").change(function (){
					$("#s3").html("");
					getItemList3($(this).val())
				})
			},
			error:function (){
				alert("系统错误")
			}
		})
	}

	function getItemList3(id){
		$.ajax({
			url:"/goodController/getItemList",
			data:{"id":id},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result){
				var list = result.result.rows;
				var dd = ''
				for(i in list){
					dd += '<option id="' + list[i].typeId + '" value="' + list[i].id + '">' + list[i].name + '</option>'
				}
				$("#s3").html("<option value=''>-请选择-</option>")
				$("#s3").append(dd)

			},
			error:function (){
				alert("系统错误")
			}
		})
	}
	$("#s3").change(function (){
		getType($("#s3").find("option:checked").attr("id"))
	})


	function getType(id){
		$("#typeTemplateId").html('<input type="text" name="typeTemplateId" value="' + id + '" />')
		$.ajax({
			url:"/goodController/getType/" + id,
			type:"post",
			dataType:"json",
			async:false,
			success:function (result){
				var type = result.result

				//品牌
				var brandJSON = JSON.parse(type.brandIds)
				var dd = ''
				for(i in brandJSON){
					dd += '<option value="' + brandJSON[i].id + '">' + brandJSON[i].text + '</option>'
				}
				$("#brand").html(dd)

				//扩展属性
				var attributeJSON = JSON.parse(type.customAttributeItems)
				dd = ''
				for (i in attributeJSON){
					dd += '<div>' +
							'<div class="col-md-2 title" id="' + "-" + i + '">' + attributeJSON[i].text + '</div>' +
							'<div class="col-md-10 data">' +
							'<input class="form-control" placeholder="' + attributeJSON[i].text + '">' +
							'</div>\n' +
							'</div>'
				}
				$("#attributeContent").html(dd)

				//规格
				var specJSON = JSON.parse(type.specIds)
				dd = ''
				var ff = ''
				for (i in specJSON){
					var specText = specJSON[i].text
					var specId = specJSON[i].id

					dd += '<div>' +
							'<div class="col-md-2 title" id="' + specId + specId + '">' + specText + '</div>' +
							'<div class="col-md-10 data"><select multiple style="width: 50%" id="' + specId + '"></select></div>' +
							'</div>'

				}
				$("#spec1").html(dd)

				for (i in specJSON){
					var specText = specJSON[i].text
					var specId = specJSON[i].id

					$("#" + specId).select2()

					$.ajax({
						url:"/goodController/getSpecNameById/" + specId,
						type:"post",
						dataType:"json",
						async:false,
						success:function (result){
							var list = result.result
							for(i in list){
								console.log(list[i].optionName)
								// ff = '<span>' +
								// 		'<input name="' + specText + '" value="' + list[i].optionName + '" type="checkbox">' +
								// 		list[i].optionName +
								// 		'</span>'
								ff = '<option value="' + list[i].optionName + '">' + list[i].optionName + '</option>'
								$("#" + specId).append(ff)
							}


						},
						error:function(){
							alert("系统错误!")
						}
					})
				}
				getSpec(id)
			},
			error:function (){
				alert("系统错误")
			}
		})
	}

	function getSpec(id){
		$.ajax({
			url:"/goodController/getSpec/" + id,
			type:"post",
			data:"json",
			async:false,
			success:function (result){
				var list = result.result
				for (i in list){
					console.log(list[i].specification)
					var specificationOptionList = list[i].specificationOptionList
					for (j in specificationOptionList){
						console.log(specificationOptionList[j])
					}
				}
			},
			error:function (){
				alert("系统错误")
			}

		})
	}



</script>
       
</body>

</html>